<template>
  <div>
    <el-form label-width="90px" size="mini">
      <tm-group label="前缀">
        <el-form-item label="文本">
          <el-input v-model="attribute.prefix"/>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="attribute.prefixColor" show-alpha/>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number v-model="attribute.prefixSize"></el-input-number>
        </el-form-item>
      </tm-group>
      <tm-group label="后缀">
        <el-form-item label="文本">
          <el-input v-model="attribute.suffix"/>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="attribute.suffixColor" show-alpha/>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number v-model="attribute.suffixSize"></el-input-number>
        </el-form-item>
      </tm-group>
      <tm-group label="数字">
        <el-form-item label="字体">
          <el-select v-model="attribute.fontFamily" placeholder="">
            <el-option v-for="(item,index) in textFamilyList" :key="index+item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="attribute.color" show-alpha/>
        </el-form-item>
        <el-form-item label="加粗" style="width: 100%;">
          <el-radio-group v-model="attribute.fontWeight">
            <el-radio-button label="lighter">更细</el-radio-button>
            <el-radio-button label="normal">正常</el-radio-button>
            <el-radio-button label="bold">加粗</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="倾斜" style="width: 100%;">
          <el-radio-group v-model="attribute.fontStyle">
            <el-radio-button label="normal">正常</el-radio-button>
            <el-radio-button label="italic">斜体</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文字大小">
          <el-input-number v-model="attribute.fontSize" style="width: 100%"/>
        </el-form-item>
        <el-form-item label="速度">
          <el-input-number v-model="attribute.speed"></el-input-number>
        </el-form-item>
      </tm-group>
      <tm-group label="阴影">
        <el-form-item label="显示" style="width: 100%;">
          <el-switch v-model="attribute.isShadow" />
        </el-form-item>
        <el-form-item label="x" v-show="attribute.isShadow">
          <el-input-number  v-model="attribute.shadowOffsetX" style="width: 100%"/>
        </el-form-item>
        <el-form-item label="y" v-show="attribute.isShadow">
          <el-input-number  v-model="attribute.shadowOffsetY" style="width: 100%"/>
        </el-form-item>
        <el-form-item label="模糊" v-show="attribute.isShadow">
          <el-input-number v-model="attribute.shadowBlur" style="width: 100%"/>
        </el-form-item>
        <el-form-item label="颜色" v-show="attribute.isShadow">
          <el-color-picker v-model="attribute.shadowColor" show-alpha/>
        </el-form-item>
      </tm-group>

    </el-form>
  </div>
</template>

<script>
import {textFamilyList} from "@/package/tools/common";

export default {
  name: "cpt-text-option",
  props: {
    attribute: Object
  },
  data() {
    return {
      textFamilyList: textFamilyList,
      textDecorationList: [
          {label:'无',value:'none'},
          {label:'下划线',value:'underline'},
          {label:'上划线',value:'overline'},
          {label:'穿过文字',value:'line-through'},
          {label:'闪烁(存在兼容问题)',value:'blink'}
      ]
    }
  }
}
</script>

<style scoped>

</style>
